<!--
 * @description 分类组件
 * @author guojiteng
 * @date 2022/3/23
 -->
<template>
  <div class="study-classify">
    <div class="class-one">
      <div class="class-item" :class="{active:oneId===-1}" @click="oneChange(-1)">
        <i class="icon" :class="[oneId===-1 && 'active']" />
        <span>全部</span>
      </div>
      <div v-for="(item,i) in list" :key="i" class="class-item" :class="{active:oneId===item.id}" @click="oneChange(i,item.id,item.classifyName)">
        {{ item.classifyName }}
      </div>
    </div>
    <div class="class-two">
      <div v-if="oneId && oneId!==-1" class="class-item" :class="{active:twoId===-1}" @click="twoChange(-1)">全部</div>
      <div v-for="(item,i) in twoList" :key="i" class="class-item" :class="{active:twoId===item.id}" @click="twoChange(i,item.id,item.classifyName)">
        {{ item.classifyName }}
      </div>
    </div>
    <div class="class-three">
      <div v-if="twoId && twoId!==-1" class="class-item" @click="threeChange(-1)">全部</div>
      <div v-for="(item,i) in threeList" :key="i" class="class-item" @click="threeChange(i,item.id,item.classifyName)">
        {{ item.classifyName }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Classify',
  props: {
    list: {
      type: Array,
      default: () => { return [] }
    },
    activeInfo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      oneId: '',
      twoId: '',
      threeId: '',
      oneName: '',
      twoName: '',
      threeName: '',
      twoList: [],
      threeList: []
    }
  },
  methods: {
    getParentId(list, id) {
      for (const i in list) {
        if (list[i].id === id) {
          return [list[i]]
        }
        if (list[i].children) {
          const node = this.getParentId(list[i].children, id)
          if (node !== undefined) {
            return node.concat(list[i])
          }
        }
      }
    },
    oneChange(i, id, name) {
      this.twoList = []
      this.twoId = ''
      this.twoName = ''
      this.threeList = []
      this.threeId = ''
      this.threeName = ''
      if (i !== -1) { // 如果不是选的全部,查询对应的二级数组
        this.oneId = id
        this.oneName = name
        this.twoList = this.list[i].children || []
      } else { // 选择了全部就返回上一页，重新调接口
        this.oneId = -1
        this.$emit('classBack', -1, '全部')
      }
    },
    twoChange(i, id, name) {
      this.threeList = []
      this.threeId = ''
      this.threeName = ''
      if (i !== -1) { // 如果不是选的全部,查询对应的三级数组
        this.twoId = id
        this.twoName = name
        this.threeList = this.twoList[i].children || []
      } else { // 选择了全部，就返回一级菜单的id
        this.twoId = -1
        this.$emit('classBack', this.oneId, this.oneName)
      }
    },
    threeChange(i, id, name) {
      let myId = ''
      let myName = ''
      if (i !== -1) { // 如果不是选择了全部，就返回当前的id
        myId = id
        myName = name
      } else {
        myId = this.twoId
        myName = this.twoName
      }
      this.$emit('classBack', myId, myName)
    }
  }
}
</script>
<style type="text/css" lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.study-classify{
  width: rem(750);
  z-index: 10;
  border-radius: 0 0 rem(16) rem(16);
  background: #F0F0F0;
  position: absolute;
  height: rem(710);
  top: rem(88);
  right: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  >div{
    height: 100%;
    overflow-y: auto;
    .class-item{
      width: 100%;
      min-height: rem(80);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: rem(28);
      font-family: PingFang SC Medium, PingFang SC Medium-Medium;
      font-weight: bold;
      color: #888888;
      padding: rem(15) rem(15);
      .icon{
        width: rem(24);
        height: rem(24);
        margin-right: rem(10);
        background: url('../images/classify.png') no-repeat;
        background-size: 100% 100%;
        &.active {
          @include bg-image('../', '/classify-a.png');
          background-size: 100% 100%;
        }
      }
      >span{
        display: inline-block;
      }
    }
  }
  .class-one{
    width: rem(230);
    background: #F0F0F0;
    .active{
      background: #FAFBFD;
      @include font-color($mainColor);
    }
  }
  .class-two{
    width: rem(230);
    background: #f7f8f9;
    >div{
      color: #333333 !important;
    }
    .active{
      background: #fff;
    }
  }
  .class-three{
    width: rem(290);
    background: #FFFFFF;
    >div{
      color: #333333 !important;
    }
  }
}
</style>
